<script setup>
import CommodityCard from "@/components/scenic-card/ScenicCard.vue"
import ActivityCard from '@/components/activity-card/ScenicCard.vue';
import SharedCard from '@/components/activity-card/sharedCard.vue';
import ScenicCardPanda from "@/components/scenic-card/ScenicCardPanda.vue"
import HotelCart from "@/components/hotel-card/HotelCart.vue"
import HotPotCart from "@/components/Hot-Pot-cart/HotPotCart.vue"
import api from "@/api/index.js"
import {ref, defineProps, watch, defineEmits, computed, } from "vue"
import { useRouter } from "vue-router"
import { userStore } from "@/stores/user.js"

const props = defineProps({
  update: Number,
  scenicActive: String
})
const emit = defineEmits(['isLoading'])
const user = userStore()

watch(
  () => props.update,
  () => {
    _getSelectedScenicSpots()
  }
);

watch(() => props.scenicActive, () => {
  getList()
})

const hotelList = ref([])

const getList = () => {
	if(props.scenicActive === 'activityReservation'){
		console.log("aaa-get-预约活动");
	}
	if(props.scenicActive === 'sharedReservation'){
		console.log("aaa-get-共享活动");
	}
  if (props.scenicActive === 'attractionTickets' && !scenicList.value?.length) {
    _getSelectedScenicSpots()
  } else if (props.scenicActive === 'hotel' && !hotelList.value?.length) {
    _getHotelList()
  } else if (props.scenicActive === 'hotPot' && !hotPotList.value?.length) {
    _getHotPotList()
  }
}

const totalCountHotel = ref(0)

const pandaScenicList = ref([])

const _getHotelList = () => {
  emit('isLoading', true)
  loading.value = true
  const params = {
    pageNum: 1,
    pageSize: 5,
    scenicType: 0,
    lon: user.position?.coords?.longitude,
    lat: user.position?.coords?.latitude
  }
  api.getHomeHotelList(params).then((res) => {
    totalCountHotel.value = res.data.totalCount
    hotelList.value = res.data?.list ?? []
  }).finally(() => {
    loading.value = false
    emit('isLoading', false)
  })
}

const hotPotList = ref([])
const totalCountHotPot = ref(0)
const _getHotPotList = () => {
  loading.value = true
  emit('isLoading', true)
  const params = {
    pageNum: 1,
    pageSize: 5,
    scenicType: 0,
    lon: user.position?.coords?.longitude,
    lat: user.position?.coords?.latitude
  }
  api.getHomeHotPotList(params).then((res) => {
    hotPotList.value = res.data?.list ?? []
    hotPotList.value = hotPotList.value.filter(item => item)
    totalCountHotPot.value = res.data.totalCount
  }).finally(() => {
    loading.value = false
    emit('isLoading', false)
  })
}

const router = useRouter();

const loading = ref(false)
const scenicList = ref([])
const totalCountScenic = ref(0)
const _getSelectedScenicSpots = () => {
  loading.value = true
  const params = {
    pageNum: 1,
    pageSize: 7,
    scenicType: 0,
    cityCode: user.city?.code,
    lon: user.position?.coords?.longitude,
    lat: user.position?.coords?.latitude
  }
  emit('isLoading', true)
  api
    .getHomeScenicList(params)
    .then((res) => {
      if (res.code === 200 || res.code === '200') {
        totalCountScenic.value = res.data.totalCount
        scenicList.value = res.data?.list ?? []
        scenicList.value.forEach((item) => {
          item.coverImageList = item?.coverImage?.split(",")
        })
      }
    })
    .finally(() => {
      loading.value = false
      emit('isLoading', false)
    })
}

_getSelectedScenicSpots()

const totalCount = computed(() => {
  if (props.scenicActive === 'attractionTickets') {
    return totalCountScenic.value
  } else if (props.scenicActive === 'hotel') {
    return totalCountHotel.value
  } else if(props.scenicActive === 'activityReservation'){
	// 需要替换成活动预约的
	return totalCountScenic.value;
  }  else if(props.scemicActive === 'sharedReservation'){
		// 需要替换成共享预约
		return totalCountScenic.value;
  }  else {
    return totalCountHotPot.value
  }
})

const moreClick = () => {
	if(props.scenicActive === 'activityReservation'){
		router.push({
			path:'/activityReservation/list',
			query:{
				scenicType: 0,
				type: props.scenicActive
			}
		})
	}else{
		router.push({
		  path: 'result/list',
		  query: {
			scenicType: 0,
			type: props.scenicActive
		  }
		})
	}
}

const getTitle = () => {
  if (props.scenicActive === 'attractionTickets') {
    return '优质景区'
  }
  if (props.scenicActive === 'hotel') {
    return '优质酒店'
  }
  if(props.scenicActive === 'activityReservation'){
	return '优质活动'
  }
  if(props.scenicActive === 'sharedReservation'){
	return '共享预约'
  }
  return '优质店铺'
}

</script>

<template>
<!--  v-if="totalCount"-->
  <div class="scenic">
    <div class="header">
      <div>
        <h3>
          {{ getTitle() }}
        </h3>
        <div class="line"></div>
      </div>
      <span v-if="totalCount > 0" class="fz12" @click="moreClick">更多 ></span>
    </div>
    <div>
      <template v-if="!loading">
		<div v-show="scenicActive === 'activityReservation'">
			<!-- 活动预约 -->
			<ActivityCard
            v-for="item in scenicList"
            :key="item.id"
            :data="item"
            class="card"
          />
		</div>
		<div v-show="scenicActive === 'sharedReservation'">
			<!-- 共享预约 -->
			<SharedCard
            v-for="item in scenicList"
            :key="item.id"
            :data="item"
            class="card"
          />
		</div>
        <div v-show="scenicActive === 'attractionTickets'">
          <CommodityCard
            v-for="item in scenicList"
            :key="item.id"
            :data="item"
            class="card"
          />
          <ScenicCardPanda
            v-for="item in pandaScenicList"
            :key="item.id"
            :data="item"
            class="card"
          />
        </div>
        <div v-show="scenicActive === 'hotel'">
          <HotelCart
            v-for="item in hotelList"
            :key="item.id"
            :data="item"
            class="card"
          />
        </div>
        <div v-show="scenicActive === 'hotPot'">
          <HotPotCart
            v-for="item in hotPotList"
            :key="item.id"
            :data="item"
            class="card"
          />
        </div>
      </template>
      <template v-else>
        <CommodityCard
          v-for="(item, index) in Array(1)"
          :key="index"
          :loading="loading"
          :data="item"
          class="card"
        />
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
.scenic {
  padding: 0 1.5rem;
  margin-top: 1.5rem;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.6rem;
    height: 2.5rem;
    h3 {
      font-size: 1.8rem;
      color: #333333;
      font-weight: bold;
    }
    .line {
      width: 3rem;
      height: 0.5rem;
      background: linear-gradient(
        90deg,
        var(--van-primary-color) 0%,
        #fbeaa8 92%
      );
    }

    span {
      color: #999999;
    }
  }
  .card {
    margin-bottom: 1.5rem;
  }
}
</style>